﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>走进喜利得</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<script type="text/javascript" src="js/PerfectLoad.js"></script>
<script>
    $(function () {
        $.MyCommon.PageLoading({ sleep: 200 });
    })
</script>


<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
	font-family:Microsoft YaHei,Arial, Helvetica, Verdana, sans-serif; font-size:0;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, legend, button,form, input, textarea, th, td ,article ,aside, dialog, footer, header, section, footer, nav, figure, menu{ list-style:none;}

body{
	font-family:"microsoft yahei";
}
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
}  

.swiper-slide{
	width:100%;
	height:100%;
	background:url(images/bg.jpg) no-repeat left top;
	background-size:100% 100%;
}
img{
	display:block;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #555;
border:2px solid #fff;
opacity: .4; margin:6px 0;
border-radius: 90px;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes start {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
	0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
	60% {opacity: 1;-moz-transform: translate(0,0);}
	100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
	0%,30% {opacity: 0;transform: translate(0,10px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-8px);}
}
.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array{
	position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
}
</style>


</head>

<body>

<div style="display:none; position:absolute; z-index:0; left:-2000px;"><img src="images/share.jpg" width="400" height="400"></div>

<div class="swiper-container">
    <div class="swiper-wrapper">
    <!-------------slide1----------------->
<section class="swiper-slide swiper-slide1">
<img src="images/pic1.jpg" class="ani resize" style="width:640px;height:960px;left:0px;top:0px;z-index:1;" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s"  > 
<img src="images/logo.jpg" class="ani resize" style="width:640px;height:80px;left:0px;top:.px;z-index:3;" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s"  > 
<img src="images/slogan.png" class="ani resize" style="width:578px;height:350px;left:17px;top:65px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.8s"  > 
<img src="images/title_1.png" class="ani resize" style="width:578px;height:130px;left:17px;top:280px;z-index:2;" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 

<a href="http://mp.weixin.qq.com/s?__biz=MjM5NzkwOTUxMA==&mid=205683789&idx=3&sn=b8f9eea2b2c074bea5ef34c6aa1c1560&scene=1&key=1936e2bc22c2ceb5e0b6872abd09bf6243d0713842a5911317b305d8bd87d0b14a0cf8b2e54adca62cb40fd959fba938&ascene=1&uin=MTU2MTc0NTU1&devicetype=webwx&version=70000001&pass_ticket=xQ6%2BnAlIqdVAGJ5Fpzv9Dw%2Bl%2BlMc7aQxJZefh1jqVK0%3D" class="ani resize" style="width:155px;height:150px; background-color:#000; background: rgba(224, 0, 16, 0.75) !important; filter:alpha(opacity=75);left:57px;top:415px;z-index:3; line-height:115%; font-size:14px; color:#fff; text-align:center; text-decoration:none; overflow:hidden;" swiper-animate-effect="zoomInRight" swiper-animate-duration="2s" swiper-animate-delay="1s"><em style="display:block; height:50px; margin:11px 0 6px 0; background:url(images/icon_1_1.png) no-repeat center 0; background-size:auto 100%;" class=" resize"></em>喜利得<br>中国</a>
<a href="http://mp.weixin.qq.com/s?__biz=MjM5NzkwOTUxMA==&mid=205686014&idx=1&sn=e8efc18aab38f7c001da6fd6e6f14cc1&scene=1&key=1936e2bc22c2ceb5cfcbde70313a87b8ed5571d23a8883e14eaca27722248517d63dbe296cc49b94ed5811f1b62196d8&ascene=1&uin=MTU2MTc0NTU1&devicetype=webwx&version=70000001&pass_ticket=xQ6%2BnAlIqdVAGJ5Fpzv9Dw%2Bl%2BlMc7aQxJZefh1jqVK0%3D" class="ani resize" style="width:155px;height:150px; background-color:#000; background: rgba(224, 0, 16, 0.75) !important; filter:alpha(opacity=75);left:57px;top:585px;z-index:3; line-height:150%; font-size:14px; color:#fff; text-align:center; text-decoration:none; overflow:hidden;" swiper-animate-effect="zoomInRight" swiper-animate-duration="2s" swiper-animate-delay="1.5s"><em style="display:block; height:73px; margin:10px 0 2px 0;  background:url(images/icon_1_2.png) no-repeat center 0px; background-size:auto 100%;" class=" resize"></em>冠军2020</a>
<a href="http://mp.weixin.qq.com/s?__biz=MjM5NzkwOTUxMA==&mid=205686603&idx=1&sn=11d5d558acec379382b7fd61fb575c93&scene=1&key=1936e2bc22c2ceb5c486146417b80e750b0bfa1db22d699e81a849506e6a45863755d98c7d1de1fff15cf438d5d378ab&ascene=1&uin=MTU2MTc0NTU1&devicetype=webwx&version=70000001&pass_ticket=xQ6%2BnAlIqdVAGJ5Fpzv9Dw%2Bl%2BlMc7aQxJZefh1jqVK0%3D" class="ani resize" style="width:155px;height:150px; background-color:#000; background: rgba(224, 0, 16, 0.75) !important; filter:alpha(opacity=75);left:57px;top:755px;z-index:3; line-height:120%; font-size:13px; color:#fff; text-align:center; text-decoration:none; overflow:hidden;" swiper-animate-effect="zoomInRight" swiper-animate-duration="2s" swiper-animate-delay="2s"><em style="display:block; height:56px; margin:10px 0 3px 0;  background:url(images/icon_1_3.png) no-repeat center 0px; background-size:auto 100%;" class=" resize"></em>喜利得<br>设计大奖</a>
</section>

<div class="pagination"></div>  
        
    </div>
</div>



<script>  

scaleW=window.innerWidth/640;
scaleH=window.innerHeight/960;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
          }
		  
  var mySwiper = new Swiper ('.swiper-container', {
   direction : 'vertical',
   pagination: '.swiper-pagination',
   paginationClickable: true,
   nextButton: '.swiper-button-next',
  //virtualTranslate : true,
   mousewheelControl : true,
   onInit: function(swiper){
   swiperAnimateCache(swiper);
   swiperAnimate(swiper);
	  },
   onSlideChangeEnd: function(swiper){
	swiperAnimate(swiper);
    },
	onTransitionEnd: function(swiper){
	swiperAnimate(swiper);
    },
	
	
	watchSlidesProgress: true,

      onProgress: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          var translate = progress*swiper.height/4;  
		  scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
          var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
          slide.style.opacity = opacity;
		  es = slide.style;
		  es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';

        }
      },
	
	   onSetTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
          es = swiper.slides[i].style;
		  es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

        }
      },
	
	   })   

	         
  </script>
</body>
</html>
